<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Bootstrap v3.3.4 核心 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/sqh_style_v2.0.css">
    <script src="../js/sqh_js_v2.0.js"></script>
    <title>抽奖</title>
    <style>

        .record{
            position: relative;
            width: 100%;
            padding: 6px 0;
        }

        .popover {
            position: relative;
            max-width: 255px;
        }
        .popover.right {
            margin-left: 5px;
        }
        .popover-content {
            padding: 9px 0 9px 30px;
        }
    </style>

    <script>

        //标记开始答题,false表示还没有开始答题，true表示已经开始答题
        var startFlag = false;
        //用来标记回答了几个问题
        var count=0;
        //统计答对的正确数
        var correct=0;

        //滚动条到底部
        function scrollToBottom(){
//            chatContainer.scrollTop = chatContainer.scrollHeight;
//            chatContainer.scrollIntoView();
            msg_end.click();
        }
    </script>

    <style>

        .chatlist, .chatlist2 {
            display: block;
            margin-bottom: 40px;
            padding-top: 5px;
        }
        .chatlist li, .chatlist2 li {
            width: 100%;
            margin-bottom: 8px;
            float: right;
        }
        .chatlist li span, .chatlist2 li span {
            position: relative;
            background: #fff;
            padding: 8px 10px;
            margin-right: 15px;
            border-radius: 5px;
            display: block;
            float: right;
        }

        .chatlist li span:before {
            display: block;
            content: '';
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-left: 6px solid #fff;
            border-bottom: 6px solid transparent;
            position: absolute;
            right: -6px;
            top: 12px;
        }
        .chatlist li span, .chatlist2 li span {
            position: relative;
            background: #fff;
            padding: 8px 10px;
            margin-right: 15px;
            border-radius: 5px;
            display: block;
            float: right;
        }

        .cf {
            clear: both;
        }

        .sendbtn {
            display: block;
            background: url(../img/send.png?v=1) no-repeat;
            width: 50px;
            height: 28px;
            background-size: 100% 100%;
            margin: 0 10px 10px 0;
            bottom: 0;
            right: 0;
            position: absolute;
        }

        .chatbox {
            height: 300px;
            width: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .part01-ctrl {
            height: 50px;
            background: #f5f5f7;
            position: relative;
        }

        .ctrl_01 {
            display: block;
            background: url(../img/ctrl_01.png) no-repeat;
            width: 28px;
            height: 28px;
            left: 10px;
            top: 12px;
            background-size: 100% 100%;
        }

        .part01-ctrl .text {
            width: 175px;
            height: 32px;
            line-height: 32px;
            color: #000;
            border: 1px solid #acacae;
            background: #fff;
            border-radius: 5px;
            padding-left: 5px;
            margin: 7px 0 0 45px;
            float: left;
            overflow: hidden;
        }

        .ctrl_02 {
            display: block;
            background: url(../img/ctrl_02.png) no-repeat;
            width: 28px;
            height: 28px;
            right: 50px;
            top: 12px;
            background-size: 100% 100%;
        }

        .ctrl_03 {
            display: block;
            background: url(../img/ctrl_03.png) no-repeat;
            width: 28px;
            height: 28px;
            right: 10px;
            top: 12px;
            background-size: 100% 100%;
        }

        .pa {
            position: absolute;
        }

        .ctrlbox {
            background: #d7d8dc none repeat scroll 0 0;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 22;
        }
    </style>
</head>
<body style="background: #cd011c">

<div class="max_width_720px margin_center" id="content">

<div id="page1" class="display_none bg_d1000c margin_center max_width_720px overflow_hidden all_height relative" onclick="nextStep('page1','page2')">
    <img src="../img/lottery_draw.png" class="img-responsive width_70 float_right relative" style="top: 20%;">
</div>

<div id="page2" class="display_none" style='background-image: url("../img/page2_bg.jpg");background-size:100% 100%;position: relative;'>
    <div style="background: blue;height: 35px;position: absolute;bottom: 12%;" class="all_width opacity_0" onclick="nextStep('page2','page4')">dasfdsaf</div>
</div>

<div id="page4" class="" style='background-image: url("../img/page3_bg.jpg");background-size:100% 100%;display:block;position: relative;'>
    <div class="container-fluid padding_top_10 chatbox relative" id="page4_container">
        <div class="record float_left">
            <!--<img src="../img/servicer.png" class="img-responsive width_40px" data-toggle="tooltip" data-placement="right" title="Tooltip on right">-->
            <img src="../img/servicer.png" class="img-responsive width_40px float_left" >
            <div role="tooltip" class="popover fade right in" style="left: 40px; display: block;">
                <div class="arrow" style="top: 50%;"></div>
                <h3 class="popover-title" style="display: none;"></h3>

                <div class="popover-content">欢迎参加宏粉佳人大课堂考试！我是主 考官泰山君。考试期间不能作弊，必须 靠实力！Are  you  ready?</div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="height_40px fixed all_width" style="bottom: 0;left: 0;">
            <div class="width_30 margin_center bg_d1000c line_height_40px text-center" style="color: #ede74b">点击继续</div>
        </div>
    </div>

    <div class="ctrlbox pa relative display_none" style="background: transparent" id="page4_answer_div">

        <style>
            #page4_answer_start
            {
                animation:mymove 2s infinite;
                -webkit-animation:mymove 2s infinite; /*Safari and Chrome*/
            }

            @keyframes mymove
            {
                0% {left:0px;}
                25%{left:20px}
                50%{left:0px;}
                75%{left:20px;}
                100%{left:0px}
            }

            @-webkit-keyframes mymove /*Safari and Chrome*/
            {
                0% {left:0px;}
                25%{left:20px}
                50%{left:0px;}
                75%{left:20px;}
                100%{left:0px}
            }
        </style>

        <div class="absolute all_width " style="top:-40px;left: 0px;z-index: 2" id="page4_answer_start">
            <div class=" margin_center width_30" >
                <img src="../img/start_question_icon.png" class="img-responsive margin_auto">
            </div>
        </div>

        <span class="clickbtn pa"></span>
        <div class="part01-ctrl pr">
            <span class="ctrl_01 pa"></span>
            <div class="text" ></div>
            <span class="ctrl_02 pa"></span><span class="ctrl_03 pa"></span>
        </div>
    </div>
</div>

<div id="page3" class="display_none" style='background-image: url("../img/page3_bg.jpg");background-size:100% 100%;display:block;position: relative;'>
    <div style="background: blue;height: 35px;position: absolute;bottom: 12%;" class="all_width opacity_0" onclick="startQuestion(this)">dasfdsaf</div>

    <div class="container-fluid padding_top_10 chatbox relative" id="chatContainer" style="overflow-x: hidden">

        <div class="record float_left">
            <!--<img src="../img/servicer.png" class="img-responsive width_40px" data-toggle="tooltip" data-placement="right" title="Tooltip on right">-->
            <img src="../img/servicer.png" class="img-responsive width_40px float_left" >
            <div role="tooltip" class="popover fade right in" style="left: 40px; display: block;">
                <div class="arrow" style="top: 50%;"></div>
                <h3 class="popover-title" style="display: none;"></h3>

                <div class="popover-content">欢迎参加宏粉佳人大课堂考试！我是主 考官泰山君。考试期间不能作弊，必须 靠实力！Are  you  ready?</div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="record float_right">
            <!--<img src="../img/servicer.png" class="img-responsive width_40px" data-toggle="tooltip" data-placement="right" title="Tooltip on right">-->
            <img src="../img/servicer.png" class="img-responsive width_40px float_right" >

            <div role="tooltip" class="popover fade left in" style="left: auto; display: block; float: right; right: 20px;">
                <div class="arrow" style="top: 50%;"></div>
                <h3 class="popover-title" style="display: none;"></h3>

                <div class="popover-content">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div style="height: 80px;clear: both" id="nothingContainer"><a id="msg_end" name="1" href="#1">&nbsp;</a></div>

    </div>

    <div class="ctrlbox pa">
        <span class="clickbtn pa"></span>
        <div class="part01-ctrl pr">
            <span class="ctrl_01 pa"></span>

            <div class="text" id="chattext"></div>
            <span class="ctrl_02 pa"></span><span class="ctrl_03 pa"></span>
        </div>
        <div class="part02-ctrl none" id="selectionList">
            <!-- 车主回答内容 -->
            <ul id="chat_zmn_1" class="chatlist list-unstyled overflow_hidden">
                <li><span><b>早就准备好了!</b></span></li>
                <li><span><b>放马过来吧！</b></span></li>
                <li><span><b>天生学霸我怕谁！</b></span></li>
            </ul>

            <div class="sendbox cf" onclick="sendMsg()">
                <span class="sendbtn fr"></span>
            </div>

            <script>
                $(function(){
                    //自适应答案和答题的行高
                    adaptScreen();
                    //给答案绑定事件
                    answerBindEvent();
                });
                //自适应答案和答题的行高
                function adaptScreen(){
                    var screenHeight = getScreenHeight();
                    console.log("screenHeight : " + screenHeight);
                    //230是答题区的高度，20是答题区和问答之间的距离
                    $("#chatContainer").css("height",(screenHeight-230-20) + "px");
                }

                //给答案绑定事件
                function answerBindEvent(){
                    $("#selectionList ul li").on("click",function(){
                        $("#chattext").html($(this).find("span b").html());
                    });
                }

                //本机回答的问题、答案
                var questionAndAnswer=[
                    {
                        id:1,
                        question:"天为什么是蓝色的",
                        selection:["不知道","你猜猜","无可奉告"],
                        answer:"不知道"
                    },{
                        id:2,
                        question:"天为什么是蓝色的1",
                        selection:["不知道1","你猜猜1","无可奉告1"],
                        answer:"你猜猜1"
                    },{
                        id:3,
                        question:"天为什么是蓝色的2",
                        selection:["不知道2","你猜猜2","无可奉告2"],
                        answer:"无可奉告2"
                    },{
                        id:4,
                        question:"天为什么是蓝色的3",
                        selection:["我要看成绩"],
                        answer:""
                    }
                ];

                //发送消息
                function sendMsg(){
                    //缓存题目的答案
                    var answer="";
                    //false表示还没有开始答题，true表示已经开始答题
                    if(!startFlag){
                        startFlag = true;
                    }else{
                        //获取问题的答案
                        answer = questionAndAnswer[count-1].answer;
                        //表示是最后一个内容（我要看成绩）
                        if(answer.length == ""){
                            var resultMsg = '<div class="record float_right"><img src="../img/servicer.png" class="img-responsive width_40px float_right" ><div role="tooltip" class="popover fade left in" style="left: auto; display: block; float: right; right: 20px;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">我要看成绩</div></div><div class="clearfix"></div></div>';
                            $("#nothingContainer").before(resultMsg);
                            //滚动条显示在底部
                            scrollToBottom();
                            //console.log("question is over");
                            //nextStep('page3','page4');
                            window.location = "guajiang.html";
                            return false;
                        }

                    }
                    var msg = $("#chattext").html();

                    if($.trim(msg).length <= 0){
                        return false;
                    }

                    var questionIsCorrect = false;
                    //判断答题是否正确
                    if(answer != "" && answer==msg){
                        correct++;
                        //表示答案是正确的
                        questionIsCorrect = true;
                    }

                    var resultMsg = '<div class="record float_right"><img src="../img/servicer.png" class="img-responsive width_40px float_right" ><div role="tooltip" class="popover fade left in" style="left: auto; display: block; float: right; right: 20px;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">' + msg + '</div></div><div class="clearfix"></div></div>';
                    $("#nothingContainer").before(resultMsg);
                    //滚动条显示在底部
                    scrollToBottom();
                    //继续提问
                    sendQuestion(questionIsCorrect);
                    //清除消息内容
                    $("#chattext").html("");

                }

                var incorrectTips = ["答错了！考试睡着了吗！口水擦一擦，下一题来了！","这个真的不可以有！为下一题准备吧！","难道需要召唤学霸附体？加油！下一题开始!","答错了！上课把妹子呢？这年头妹子都喜欢知识型男！再来一题试试！","压轴大题果然答错了！没关系，还可以补考"];
                var correctTips = ["答对了！果然认真听讲了！请听下一题：","答对了！简直是学霸君附体！请接招：","答对了！不愧是终极考试帝！放大招：","真不错！好运才刚刚开始哦！请听题：","压轴大题都答对了！厉害啊！"];

                //发送问题，然后显示选择答题
                function sendQuestion(questionIsCorrect){
                    var obj = questionAndAnswer[count];
                    if(count == 0){
                        var resultMsg = '<div class="record float_left"><img src="../img/servicer.png" class="img-responsive width_40px float_left" ><div role="tooltip" class="popover fade right in" style="left: 40px; display: block;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">'+obj.question+'</div></div><div class="clearfix"></div></div>';
                    }else if(questionIsCorrect){
                        var resultMsg = '<div class="record float_left"><img src="../img/servicer.png" class="img-responsive width_40px float_left" ><div role="tooltip" class="popover fade right in" style="left: 40px; display: block;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">'+correctTips[Math.floor(Math.random()*5)]+'<br>'+obj.question+'</div></div><div class="clearfix"></div></div>';
                    }else{
                        var resultMsg = '<div class="record float_left"><img src="../img/servicer.png" class="img-responsive width_40px float_left" ><div role="tooltip" class="popover fade right in" style="left: 40px; display: block;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">'+incorrectTips[Math.floor(Math.random()*5)]+'<br>'+obj.question+'</div></div><div class="clearfix"></div></div>';
                    }

                    //显示提问
                    $("#nothingContainer").before(resultMsg);
                    var selectionStr = "";
                    for(var i=0;i<obj.selection.length;i++){
                        selectionStr = selectionStr + "<li><span><b>"+obj.selection[i]+"</b></span></li>"
                    }
                    //显示答案
                    $("#chat_zmn_1").html(selectionStr);
                    //给答案绑定事件
                    answerBindEvent();
                    //问题递进
                    count++;
                }

            </script>
        </div>

    </div>

</div>


</div>

</body>

<script>

    function nextStep(currentPage,nextPage){
        $("#"+currentPage).addClass("display_none");
        $("#"+nextPage).removeClass("display_none");
    }

    $(function(){

        $("#page4_container").on("click",function(){
            $("#page4_answer_div").removeClass("display_none");
        });
        $("#page4_answer_start").on("click",function(){
            nextStep('page4','page3');
        });

        window.onload = function(){
            var screenHeight = getScreenHeight();
            document.getElementById("content").style.height = screenHeight+"px";
            document.getElementById("page2").style.height = screenHeight+"px";
            document.getElementById("page3").style.height = screenHeight+"px";
            //添加page4的步骤
            document.getElementById("page4_container").style.height = screenHeight+"px";

            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover({
                //提示标签在控件显示的位置 —— top | bottom | left | right | auto
                placement : "left",
                //在template模板<div class="tooltip-inner"></div>控件内展示的内容
                //触发事件click | hover | focus | manual.
                trigger:"click",
                //是否将html代码做转换，false是不转换，true表示转换
                html:true
            });
        };
    });

</script>

</html>

